<!-- 
  四位随机字母加数字验证码
  <template>
  <div class="ValidCode disabled-select" style="width: 100%; height: 100%" @click="refreshCode">
    <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{ item.code }}</span>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { defineEmits } from "vue";

const length = 4;
const codeList = ref([]);

onMounted(() => {
  createdCode();
});

const refreshCode = () => {
  createdCode();
};

const emit = defineEmits(['update:value'])
const createdCode = () => {
  let len = length;
  let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789';
  let charsLen = chars.length;

  let newCodeList = [];
  // 生成
  for (let i = 0; i < len; i++) {
    let rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)];
    let fontSize = Math.floor(Math.random() * 10 + 15); // 添加字体大小属性
    newCodeList.push({
      code: chars.charAt(Math.floor(Math.random() * charsLen)),
      color: `rgb(${rgb})`,
      padding: `${[Math.floor(Math.random() * 10)]}px`,
      transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg`,
      fontSize: `${fontSize}px` // 设置字体大小
    });
  }
  // 指向
  codeList.value = newCodeList;
  // 将当前数据派发出去
  emit('update:value', newCodeList.map(item => item.code).join(''));
};

const getStyle = (data) => {
  return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`;
};
</script>

<style>
.ValidCode {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.ValidCode span {
  display: inline-block;
}
</style> -->

 <!-- 个位数加减乘验证码 -->
<template>
  <div class="ValidCode disabled-select" style="width: 100%; height: 100%" @click="refreshCode">
    <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{ item.code }}</span>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { defineEmits } from "vue";

const codeList = ref([]);

onMounted(() => {
  createdCode();
});

const refreshCode = () => {
  createdCode();
};

const emit = defineEmits(['update:value'])
const createdCode = () => {
  let num1 = Math.floor(Math.random() * 10);
  let num2 = Math.floor(Math.random() * 10);
  // 0: +, 1: -, 2: *
  let operator = Math.floor(Math.random() * 3); 

  let result;
  let code;
  if (operator === 0) {
    result = num1 + num2;
    code = `${num1} + ${num2}`;
  } else if (operator === 1) {
    result = num1 - num2;
    code = `${num1} - ${num2}`;
  } else {
    result = num1 * num2;
    code = `${num1} * ${num2}`;
  }

  // 添加字体颜色
  let rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 200), Math.round(Math.random() * 200)];
  // 添加字体间距
  let padding = Math.floor(Math.random() * 10)
  // 添加字体角度
  let transform =  Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)
  // 添加字体大小属性
  let fontSize = Math.floor(Math.random() * 10 + 15); 
  let newCodeList = [{
    code: code,
    color: `rgb(${rgb})`,
    padding: `${padding}px`,
    transform: `rotate(${transform}deg`,
    fontSize: `${fontSize}px`,

  }];

  codeList.value = newCodeList;
  emit('update:value', result.toString());
};

const getStyle = (data) => {
  return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`;
};
</script>

<style>
.ValidCode {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.ValidCode span {
  display: inline-block;
}
</style>
